<template>
  <div class="maie">
    <!-- 顶部标题 -->
    <div class="dbtop">个人中心</div>
    <!-- 顶部标题 -->
    <!-- 登录部分 -->
    <div class="mdlu">
        <div class="mleft">
            <div class="mimg">
                <img :src="SMDataURL+'/images/wwhhr.png'"></img>
            </div>
            <div class="mid">
                <p class="yhid">卡萨丁就是个</p>
                <p class="name">(ID:{{this.$store.getters.sidebar.userId}})</p>
            </div>
        </div>
        <div class="yqsa">
          <img :src="SMDataURL+'/images/myw-fx.png'" class="fximg"></img>
          <p class="deyq">邀好友拼团</p>
        </div>
    </div>
    <!-- 登录部分 -->
    <!-- 各图标部分 -->
    <div class="tubaio">
        <div class="box" @click="tomypt">
            <div class="bxig">
                <img :src="SMDataURL+'/images/myw-8d.png'"></img>
            </div>
            <p class="sfnas">我的拼团</p>
        </div>
        <div class="box" @click="toqb">
            <div class="bxig">
                <img :src="SMDataURL+'/images/myw-7d.png'"></img>
            </div>
            <p class="sfnas">钱包</p>
        </div>
        <div class="box">
            <div class="bxig">
                <img :src="SMDataURL+'/images/myw-6d.png'"></img>
            </div>
            <p class="sfnas">优惠券</p>
        </div>
        <div class="box">
            <div class="bxig">
                <img :src="SMDataURL+'/images/myw-5d.png'"></img>
            </div>
            <p class="sfnas">我要当团长</p>
        </div>
    </div>
    <div class="tubaio1">
        <p class="huoda">我的货单</p>
            <div class="dagp">
                <div class="box">
                  <div class="bxig">
                    <img :src="SMDataURL+'/images/myw-1d.png'"></img>
                  </div>
                  <p class="sfnas">待发货</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-2d.png'"></img>
                    </div>
                    <p class="sfnas">待核销</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-3d.png'"></img>
                    </div>
                    <p class="sfnas">待收货</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-4d.png'"></img>
                    </div>
                    <p class="sfnas">已完成</p>
                </div>
            </div>
    </div>
    <div class="tubaio1">
        <p class="huoda">服务</p>
            <div class="dagp">
                <div class="box">
                  <div class="bxig">
                    <img :src="SMDataURL+'/images/myw-15d.png'"></img>
                  </div>
                  <p class="sfnas">收藏</p>
                </div>
                <div class="box" @click="todlu">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-14d.png'"></img>
                    </div>
                    <p class="sfnas">账号</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-13d.png'"></img>
                    </div>
                    <p class="sfnas">客服</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-12d.png'"></img>
                    </div>
                    <p class="sfnas">关于</p>
                </div>
            </div>
    </div>
    <div class="tubaio1">
        <p class="huoda">合作</p>
            <div class="dagp">
                <div class="box">
                  <div class="bxig">
                    <img :src="SMDataURL+'/images/myw-11d.png'"></img>
                  </div>
                  <p class="sfnas">我要供货</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-10d.png'"></img>
                    </div>
                    <p class="sfnas">我要开店</p>
                </div>
                <div class="box">
                    <div class="bxig">
                        <img :src="SMDataURL+'/images/myw-9d.png'"></img>
                    </div>
                    <p class="sfnas">城市合伙人</p>
                </div>
            </div>
    </div>
    <!-- 各图标部分 -->
    <div class="zhanwei"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
    };
  },
  methods: {
      tomypt(){
          this.$router.push('/myspelling')
      },
      toqb(){
          this.$router.push('/remaining')
      },
      todlu(){
          this.$router.push('/denglu')
      }
  },
};
</script>

<style scoped>
.maie{
    background:#f6f6f6;
    border: 1px solid white;
}
/* 顶部标题 */
.dbtop {
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  padding-left: 10px;
}
/* 顶部标题 */
/* 登录部分 */
.mdlu{
    width: 94%;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    margin: 0 auto;
    margin-top: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 4px;
}
.mleft{
    display: flex;
    align-items: center;
}
.mimg{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}
.mimg img{
    max-width: 100%;
    max-height: 100%;
}
.mid{
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.yhid{
    font-weight: bold;
}
.name{
    font-size: 13px;
    color: #333;
}
.yqsa{
    height: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}
.fximg{
  width: 22px;
  height: 22px;
}
.deyq{
    font-size: 15px;
    color: #363636;
}
/* 登录部分 */
/* 各图标部分 */
.tubaio{
    width: 94%;
    padding: 10px 10px;
    box-sizing: border-box;
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin: 18px auto;
}
.box{
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.bxig{
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;
    margin: 3px;
}
.bxig img{
    max-width: 100%;
    max-height: 100%;
}
.sfnas{
    font-size: 15px;
    color: #333;
}
.tubaio1{
    width: 94%;
    padding: 10px 10px;
    box-sizing: border-box;
    background: white;
    border-radius: 4px;
    margin: 18px auto;
    display: flex;
    flex-direction: column;
}
.huoda{
    padding-bottom: 2px;
    border-bottom: solid 1px #E5E5E5;
    margin-bottom: 6px;
}
.dagp{
    display: flex;
    align-items: center;
}
/* 各图标部分 */
</style>